import React, { PureComponent } from "react";
import { Card, Table, Spin } from "antd";
import dynamic from "umi/dynamic";
import { connect } from "dva";
import { delay } from "utils/comm";
import { getMenuRouter } from "components/layouts/menuFn";
import PageLayout from "components/pageconlayout/PageLayout";
import {
  emptyParams,
  getColumns,
  getPageProps,
  handlePageChange,
  getEllipsisCell,
  initAppListData,
  initData,
} from "./TaskTotalHelper";

import styles from "./FlowTaskTotal.less";

const AdvancedFilter = dynamic({ loader: async () => {
  await delay(800);
  return import("../components/AdvancedFilter");
} });

const Catalogue = dynamic({ loader: async () => {
  await delay(100);
  return import("components/catalogue/Catalogue");
} });

@connect(({ appListMenu, Report, loading, Public }) => ({
  appListMenu,
  Report,
  loading,
  menuDataList: Public.menuDataList,
  resourceList: Public.resourceList,
}))
class FlowTaskTotal extends PureComponent {
  state = {
    filterVisible: true,
    selectedKeys: [],
    page: {
      pageNum: 1,
      pageSize: 10,
    },
  };

  getColumns = getColumns.bind(this);

  getEllipsisCell = getEllipsisCell.bind(this, styles.ellipsis);

  getMenuRouter = getMenuRouter.bind(this);

  getPageProps = getPageProps.bind(this);

  handlePageChange = handlePageChange.bind(this);

  initAppListData = initAppListData.bind(this);

  initData = initData.bind(this);

  searchParams = { ...emptyParams };

  componentDidMount() {
    this.initAppListData();
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: "Report/clearData" });
  }

  getFormThis = (formThis, type = "advancedFilter") => {
    if (type === "advancedFilter") {
      this.filterForm = formThis;
    } else if (type === "queryExtra") {
      this.queryExtraForm = formThis;
    }
  };

  resetPageData = () => {
    const { dispatch } = this.props;
    this.searchParams = { ...emptyParams };
    dispatch({ type: "Report/clearData" });
    this.setState({
      page: { pageNum: 1, pageSize: 10 },
      filterVisible: false,
    });
    if (this.filterForm) this.filterForm.handleReset();
    if (this.queryExtraForm) this.queryExtraForm.handleReset();
    this.initAppListData();
  };

  // 获取查询参数
  getQueryParam = () => {
    const {
      page: { pageNum, pageSize },
    } = this.state;
    return { ...this.searchParams, pageNum, pageSize };
  };

  // 搜索
  handleSearch = () => {
    const { page } = this.state;
    if (this.filterForm) this.filterForm.handleSubmit();
    if (this.queryExtraForm) this.queryExtraForm.handleSubmit();
    this.setState({ page: { ...page, pageNum: 1 } }, () => {
      this.initData();
    });
  };

  /* 我的流程单选择 */
  handleTypeSelect = (selectedKeys = [], e, preId, nomalSelectedKeys) => {
    const Keys = selectedKeys[0].split("|");

    const newSelectkeys = nomalSelectedKeys || selectedKeys;
    // console.log(e.node.props.isLeaf)
    if (!(selectedKeys && selectedKeys[0].length > 0)) return;
    if (e.node.props.isLeaf) {
      // 子节点
      this.searchParams = {
        ...this.searchParams,
        busiId: selectedKeys[0],
        appId: "",
        tenantId: "",
      };
    } else if (Keys[0] === "tenant") {
      this.searchParams = {
        ...this.searchParams,
        tenantId: Keys[Keys.length - 1],
        appId: "",
        busiId: "",
      };
    } else {
      this.searchParams = {
        ...this.searchParams,
        appId: Keys[Keys.length - 1],
        tenantId: "",
        busiId: "",
      };
    }
    if (this.filterForm) this.filterForm.handleReset();
    if (this.queryExtraForm) this.queryExtraForm.handleReset();
    this.setState({ selectedKeys: newSelectkeys });
    this.handleSearch();
  };

  // 查询参数改变
  handleParamsChange = (newparams) => {
    this.searchParams = { ...this.searchParams, ...newparams };
  };

  handleFilterVisible = () => {
    const { filterVisible } = this.state;
    this.setState({ filterVisible: !filterVisible });
  };

  render() {
    const { loading, dispatch, Report, appListMenu } = this.props;
    const {
      page: { pageNum, pageSize },
      filterVisible,
      selectedKeys,
    } = this.state;
    const { TaskTotalData = [], TaskTotalCount: totalCount = 0 } = Report;

    const { appListMenuData = [] } = appListMenu;

    const taskLoading = loading.effects["Report/getTaskTotal"];
    const menuListLoading = loading.effects["appListMenu/getAppListData"];
    return (
      <div className={styles.root}>
        <PageLayout
          leftContent={
            <Card
              title="应用业务目录"
              style={{ width: "100%", height: "100%" }}
              bodyStyle={{
                minHeight: window.innerHeight - 64 - 16 - 16 - 48 - 104 - 10,
              }}
            >
              <Spin spinning={menuListLoading} delay={300}>
                <Catalogue
                  CatalogueData={appListMenuData}
                  treeNodeSelect={this.handleTypeSelect}
                  selectedKeys={selectedKeys}
                  // defaultSelectedKeys={[this.processType]}
                />
              </Spin>
            </Card>
          }
          rightContent={
            <Card
              className={styles.rightCon}
              title={
                <div className={styles.container}>
                  <span className={styles.title}>
                    流程任务统计列表(
                    {totalCount}
                    )
                  </span>
                </div>
              }
            >
              <AdvancedFilter
                dispatch={dispatch}
                onSearch={this.handleSearch}
                handleParamsChange={this.handleParamsChange}
                visible={filterVisible}
                getFormThis={this.getFormThis}
                renderType="taskTotal"
              />
              <Table
                className={styles.listcon}
                columns={this.getColumns()}
                dataSource={TaskTotalData}
                loading={taskLoading}
                rowKey="taskId"
                pagination={this.getPageProps(pageNum, pageSize, totalCount)}
              />
            </Card>
          }
        />
      </div>
    );
  }
}

export default FlowTaskTotal;
